// 全局变量
let metersTable;
let usageChart, costChart;

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查用户登录状态
    checkLoginStatus();
    
    // 初始化侧边栏
    initializeSidebar();
    
    // 加载默认页面（首页）
    loadPage('dashboard');
    
    // 初始化退出按钮
    document.getElementById('logoutBtn').addEventListener('click', logout);
});

// 检查登录状态
function checkLoginStatus() {
    const username = localStorage.getItem('username');
    const role = localStorage.getItem('role');
    
    if (!username || !role || role !== 'CUSTOMER') {
        // 未登录或不是客户，跳转到登录页面
        window.location.href = '/login.html';
        return;
    }
    
    // 显示用户名
    document.getElementById('currentUsername').textContent = username;
}

// 初始化侧边栏
function initializeSidebar() {
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有活动状态
            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
            
            // 添加活动状态到当前链接
            this.classList.add('active');
            
            // 加载对应页面
            const page = this.getAttribute('data-page');
            loadPage(page);
        });
    });
}

// 加载页面内容
function loadPage(page) {
    fetch(`/customer/templates/${page}.html`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('content').innerHTML = html;
            
            // 根据页面类型初始化不同功能
            switch(page) {
                case 'dashboard':
                    initializeDashboard();
                    break;
                case 'meters':
                    initializeMeters();
                    break;
                case 'usage-history':
                    initializeUsageHistory();
                    break;
                case 'bills':
                    initializeBills();
                    break;
            }
        })
        .catch(error => {
            console.error('加载页面失败：', error);
            showAlert('加载页面失败，请稍后重试！', 'danger');
        });
}

// 初始化电表信息页面
function initializeMeters() {
    // 初始化数据表格
    metersTable = $('#metersTable').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Chinese.json'
        },
        columns: [
            { data: 'meterNo' },
            { data: 'address' },
            { data: 'model' },
            { data: 'installationDate' },
            { data: 'currentReading' },
            { data: 'lastReadingDate' },
            {
                data: 'status',
                render: function(data) {
                    const statusClass = data === 'NORMAL' ? 'success' : 'danger';
                    const statusText = data === 'NORMAL' ? '正常' : '异常';
                    return `<span class="badge badge-${statusClass}">${statusText}</span>`;
                }
            }
        ]
    });
    
    // 加载电表数据
    loadMeterData();
    
    // 初始化图表
    initializeCharts();
}

// 加载电表数据
function loadMeterData() {
    const userId = localStorage.getItem('userId');
    
    // 调用后端API获取电表数据
    fetch(`/api/customer/${userId}/meters`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新统计数据
                updateStatistics(data.statistics);
                // 更新表格数据
                metersTable.clear().rows.add(data.meters).draw();
                // 更新图表数据
                updateCharts(data.usageHistory);
            } else {
                showAlert(data.message || '加载数据失败！', 'danger');
            }
        })
        .catch(error => {
            console.error('加载数据失败：', error);
            showAlert('加载数据失败，请稍后重试！', 'danger');
        });
}

// 更新统计数据
function updateStatistics(stats) {
    document.getElementById('powerBalance').textContent = stats.powerBalance.toFixed(2);
    document.getElementById('powerUsed').textContent = stats.powerUsed.toFixed(2);
    document.getElementById('balanceAmount').textContent = stats.balanceAmount.toFixed(2);
    document.getElementById('monthlyUsage').textContent = stats.monthlyUsage.toFixed(2);
}

// 初始化图表
function initializeCharts() {
    const usageCtx = document.getElementById('usageChart').getContext('2d');
    const costCtx = document.getElementById('costChart').getContext('2d');
    
    // 用电趋势图
    usageChart = new Chart(usageCtx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '用电量（度）',
                data: [],
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 费用趋势图
    costChart = new Chart(costCtx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '电费（元）',
                data: [],
                borderColor: 'rgb(255, 99, 132)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// 更新图表数据
function updateCharts(history) {
    // 更新用电趋势图
    usageChart.data.labels = history.map(item => item.date);
    usageChart.data.datasets[0].data = history.map(item => item.usage);
    usageChart.update();
    
    // 更新费用趋势图
    costChart.data.labels = history.map(item => item.date);
    costChart.data.datasets[0].data = history.map(item => item.cost);
    costChart.update();
}

// 退出登录
function logout() {
    if (confirm('确定要退出登录吗？')) {
        // 清除本地存储的用户信息
        localStorage.clear();
        // 跳转到登录页面
        window.location.href = '/login.html';
    }
}

// 显示提示信息
function showAlert(message, type) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    
    // 移除现有的提示
    document.querySelectorAll('.alert').forEach(alert => alert.remove());
    
    // 添加新提示
    document.querySelector('.page-header').insertAdjacentHTML('afterend', alertHtml);
    
    // 自动关闭
    if (type === 'success' || type === 'info') {
        setTimeout(() => {
            document.querySelector('.alert').remove();
        }, 3000);
    }
} 